<template>
  <div>
    <div class="title paymentRecordTitle"></div>
    <div class="moduleBody">
      <div class="container" v-if="payRecord.length !== 0">
        <div class="tanleHeader tableHeader">
          <span>缴费时间</span>
          <span>车牌号</span>
          <span>收费类型</span>
          <span>收费金额(元)</span>
        </div>
        <vue3-seamless-scroll :list="[...payRecord]" class="scroll">
          <div class="item" v-for="(item, index) in payRecord" :key="index">
            <span>{{ item.paymentTime }}</span>
            <span>{{ item.carNumber }}</span>
            <span>{{
              item.chargeType === 'temp'
                ? '临时车辆'
                : item.chargeType === 'card'
                ? '月卡车辆'
                : '--'
            }}</span>
            <span>{{ item.actualCharge }}</span>
          </div>
        </vue3-seamless-scroll>
      </div>
      <div class="noData" v-else></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getPayRecord } from '@/services/car'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
const payRecord = ref([])
const getList = async () => {
  const res = await getPayRecord({ page: 1, pageSize: 45, paymentStatus: 1 })
  payRecord.value = res.rows
}
onMounted(() => {
  getList()
})
</script>

<style scoped lang="scss">
.scroll {
  height: 850px;
  overflow: hidden;
}
.paymentRecordTitle {
  background: url('https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/%E5%A4%A7%E5%B1%8F%E5%88%87%E5%9B%BE/%E8%BD%A6%E8%BE%86%E7%BC%B4%E8%B4%B9%E8%AE%B0%E5%BD%95%402x.png')
    no-repeat 0 0 / contain;
}
.tableHeader {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-around;
  padding: 3px 0;
  height: 44px;
  span {
    white-space: nowrap;
  }
}

.noData {
  width: 100%;
  height: 200px;
  background: url('https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/%E5%A4%A7%E5%B1%8F%E5%88%87%E5%9B%BE/%E6%9A%82%E6%97%A0%E6%95%B0%E6%8D%AE%202.png')
    no-repeat center center / 80px;
}

.item {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-around;
  padding: 3px 0;
  height: 44px;
  cursor: pointer;
  &:hover {
    background: linear-gradient(90deg, rgba(20, 25, 34, 0), #1a2c45 50%, rgba(4, 7, 13, 0));
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-image: linear-gradient(
        90deg,
        rgba(54, 146, 255, 0),
        rgba(54, 146, 255, 0.86) 50%,
        rgba(54, 146, 255, 0)
      )
      2 2;
    & span {
      display: inline-block;
      background-color: red;
      background-image: linear-gradient(180deg, #e6f7ff, #3692ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      color: transparent;
    }
    &::before {
      content: '';
      display: inline-block;
      position: absolute;
      left: 0;
      width: 16px;
      height: 16px;
      background: url('https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/smartPark/%E5%A4%A7%E5%B1%8F%E5%88%87%E5%9B%BE/hover%E5%85%89%E6%A0%87%402x.png')
        no-repeat 0 0 / contain;
    }
  }
}
span {
  flex: 1;
  text-align: center;
}

span:first-child {
  flex: 2;
}

.tableHeader {
  background: linear-gradient(0deg, #165085 0%, rgba(33, 50, 75, 0.09) 100%);
}

ul {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
</style>
